<template>
  <div class="panel">
    <div
      v-if="title"
      class="panel-title"
      :style="'background-image: url(' + icon + ');background-size:16px 16px;'"
    >
    <div class="swiper-title">
      <span :title="title">{{title}}</span>
      <div style="flex:1"></div>
      <div class="tabs">
        <div
          v-for="(i,index) in list"
          class="items"
          :class="[selectIndex == index?'actives':'']"
          :key="index"
          @click="selectType(index)"
        >{{i}}</div>
      </div>
    </div>
    </div>
    <div ref="charts" class="charts" :style="title? '' : 'height: 100%;' ">
      <slot></slot>
    </div>
    
    <div v-show="unit" class="panel-unit" :style="download? '' : 'display: block' ">单位：{{unit}}</div>
    <div class="corner">
      <i></i>
      <i></i>
      <i></i>
      <i></i>
    </div>
  </div>
</template>
<script>
/**
 * 数据面板
 * title: String 面板名称, 没有该属性则不显示, 为true时预留title的高度
 * line: 是否画标题底下的线
 * top: 图表内容容器的top值
 */
export default {
  name: "SwiperPanel",
  props: {
    title: { type: [String, Boolean], default: "" },
    line: { type: Boolean, default: true },
    top: { type: Number, default: 0 },
    download: { type: Boolean, default: false },
    unit: { type: String, default: "" },
    icon: { type: String, default: "./img/title/1.png" },
    list: { type: Array, default: ()=>{
      return ["区县", "监管单位", "企业性质"]
    } },
  },
  data(){
    return{
      selectIndex:0
    }
  },
  methods: {
    downloadImg(node) {
      // 下载成图片
      const that = this;
      if (!node) {
        node = that.$refs.charts;
      }
      let chartDoms = node.getElementsByClassName("chart");
      if (chartDoms.length > 0) {
        for (let i = 0; i < chartDoms.length; i++) {
          that.downloadImg(chartDoms[i]);
        }
        return;
      }
      let canvasDoms = node.querySelectorAll("canvas");
      if (!canvasDoms.length) {
        return;
      }
      const name = that.title
        ? that.title
        : Math.random().toString(36).substr(2);
      const w = canvasDoms[0].width + 40;
      const h = canvasDoms[0].height + 40;

      const offlineCanvas = document.createElement("canvas");
      offlineCanvas.width = w;
      offlineCanvas.height = h;
      const ctx = offlineCanvas.getContext("2d");
      ctx.fillStyle = "rgba(18, 35, 87, 0.98)";
      ctx.fillRect(0, 0, w, h);
      let canvas = null;
      for (let i = 0; i < canvasDoms.length; i++) {
        canvas = canvasDoms[i];
        ctx.drawImage(canvas, 20, 20, w - 20, h - 20);
      }
      // 创建download元素下载
      const domA = document.createElement("a");
      domA.download = name;
      domA.href = offlineCanvas.toDataURL("image/png");
      document.body.appendChild(domA);
      domA.click();
      domA.remove();
    },
    selectType(index){
        this.selectIndex=index
        this.$emit("selectType",index)
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../style/components/panel.scss";
.panel-title {
  font-size: 12px !important;
  padding: 0 20px 0 50px !important;
  height: 28px !important;
  line-height: 28px !important;
}
.tabs {
  display: flex;
  font-size: 8px !important;
  text-align: center;

  line-height: 14px !important;
  margin-left: 20px;
  .items {
    margin-left: 6px;
    color: rgb(111, 178, 255);
  }
  .actives {
    color: rgb(0, 119, 255);
    font-size: 10px !important;
    border-bottom: 1px dotted rgb(0, 119, 255);
  }
}
.swiper-title{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-items: center;
  font-size: 8px !important;
}
.charts{
  height: calc(100% - 24px) !important;
}
</style>
